<template>
  <div id="app">
    <el-row>
      <el-col :span="3">
        <el-button type="success" @click="addStu">新增</el-button>
      </el-col>
      <el-col :span="3">
        <el-button type="danger" @click="deleteData">批量删除</el-button>
      </el-col>
      <el-col :span="3" :offset="4">
        <el-checkbox v-model="iseq">精确查找</el-checkbox>
      </el-col>
      <el-col :span="11">
        <div>
          <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
            <el-select v-model="select" slot="prepend" placeholder="请选择">
              <el-option label="姓名" value="name"></el-option>
              <el-option label="性别" value="gender"></el-option>
              <el-option label="爱好" value="hobbies"></el-option>
              <el-option label="学历" value="edu"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="getData"></el-button>
          </el-input>
        </div>
      </el-col>
    </el-row>
    <div
      class="table"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-table
        height="617"
        :data="tableData"
        border
        style="width: 100%"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="90"></el-table-column>
        <el-table-column prop="name" label="姓名" width="90"></el-table-column>
        <el-table-column prop="gender" label="性别" width="90"></el-table-column>
        <el-table-column prop="hobbies" label="爱好" width="180"></el-table-column>
        <el-table-column prop="edu" label="学历" width="90"></el-table-column>
        <el-table-column prop="desc" label="个人简介"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addStu(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="deleteData(scope.row)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin:5px 20px 0 0;display:inline-block">
        <el-button @click="toggleSelection">取消选择</el-button>
      </div>
      <div class="page">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="curP"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalP"
        ></el-pagination>
      </div>
    </div>
    <div class="wp" v-show="show">
      <el-form ref="form" :model="form" label-width="80px" class="form" :rules="rules">
        <h3>{{isadd?'新增':'修改'}}学生信息</h3>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="form.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="爱好" prop="hobbies">
          <el-checkbox-group v-model="form.hobbies">
            <el-checkbox label="吃饭" name="type"></el-checkbox>
            <el-checkbox label="睡觉" name="type"></el-checkbox>
            <el-checkbox label="打豆豆" name="type"></el-checkbox>
            <el-checkbox label="豆豆是谁" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="学历" prop="edu">
          <el-select v-model="form.edu" placeholder="请选择学历">
            <el-option label="小学" value="小学"></el-option>
            <el-option label="初中" value="初中"></el-option>
            <el-option label="高中" value="高中"></el-option>
            <el-option label="大学" value="大学"></el-option>
            <el-option label="研究生" value="研究生"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="个人简介" prop="desc">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')">保存</el-button>
          <el-button @click="cancel('form')">取消</el-button>
          <el-button @click="resetForm('form')">清空表格</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="biao" style="position:relative;height:500px;width:400px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: "App",
  data() {
    return {
      loading: true,
      curP: 1,
      pageSizes: [2, 3, 5, 10],
      pageSize: 5,
      totalP: 1,
      show: false,
      tableData: [],
      form: {
        hobbies: [""]
      },
      isadd: true,
      multipleSelection: [],
      select: "",
      input: "",
      iseq: false,
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { max: 20, message: "长度不得超过 20 个字符", trigger: "blur" }
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        hobbies: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个爱好",
            trigger: "change"
          }
        ],
        edu: [{ required: true, message: "请选择学历", trigger: "change" }]
      }
    };
  },
  created(){
    console.log('c');
    this.$nextTick(()=>{
      console.log('n');
    })
  },
  mounted() {
    this.getData();
    this.test()
    console.log('m');
  },
  updated(){
    console.log('u');
  },
  methods: {
    test() {
      var myEcharts = echarts.init(document.getElementById("biao"));
      myEcharts.setOption({
        title: {
          text: "ECharts 入门示例"
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.curP = val;
      this.getData();
    },
    addStu(a) {
      this.showOrHidden();
      if (a.id) {
        this.form = a;
        this.isadd = false;
      }
    },
    deleteData(a) {
      if (!a.id) {
        let deleteArr = [];
        for (let i = 0; i < this.multipleSelection.length; i++) {
          deleteArr.push(this.multipleSelection[i].id);
        }
        a.id = deleteArr.join(",");
      }
      if (confirm("确定要删除吗")) {
        this.$.ajax({
          url: `http://localhost/api.php/system/stu/${a.id}`,
          type: "delete",
          success: data => {
            this.getData();
          }
        });
      }
    },
    onSubmit(formName) {
      let submit = true;
      this.form.hobbies[1] ? this.form.hobbies.shift() : null;
      this.form.hobbies[0] ? null : (this.form.hobbies = []);
      this.$refs[formName].validate(valid => {
        if (!valid) {
          submit = false;
          return false;
        }
      });
      if (submit) {
        this.form.hobbies = this.form.hobbies.join("/");
        this.$.ajax({
          url: `http://localhost/api.php/system/stu ${
            this.isadd ? "" : "/" + this.form.id
          }`,
          type: this.isadd ? "post" : "put",
          data: this.form,
          success: data => {
            this.showOrHidden();
            this.resetForm("form");
            this.getData();
          }
        });
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.form = {
        hobbies: [""]
      };
    },
    cancel(formName) {
      this.showOrHidden();
      this.resetForm(formName);
    },
    showOrHidden() {
      this.show = !this.show;
      this.form = {
        hobbies: [""]
      };
      this.isadd = true;
    },
    getData() {
      this.loading = true;
      setTimeout(() => {
        this.$.ajax({
          url: "http://localhost/api.php/system/stu",
          type: "get",
          data: {
            transform: 1,
            order: "id,desc",
            filter: `${this.select ? this.select : "name"},${
              this.iseq ? "eq" : "cs"
            },${this.input}`,
            page: `${this.curP},${this.pageSize}`
          },
          success: data => {
            this.tableData = data.stu;
            for (let i = 0; i < this.tableData.length; i++) {
              this.tableData[i].hobbies = this.tableData[i].hobbies.split("/");
            }
            this.totalP = data._results;
            this.loading = false;
          }
        });
      }, 20);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    toggleSelection() {
      this.$refs.multipleTable.clearSelection();
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#app {
  margin: 5px 20px;
}
.table {
  margin-top: 10px;
}
.wp {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.form {
  background-color: #fff;
  margin: 50px auto 0;
  width: 50%;
  padding: 10px 20px;
  border-radius: 10px;
}
.form h3 {
  text-align: center;
  margin-bottom: 10px;
}
.el-select .el-input {
  width: 110px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.page {
  display: inline-block;
}
</style>